<template>
  <div class="page-box">
    <!-- 搜索部分 -->
    <seachFrom @getTableData="getTableData" ref="seachFrom"></seachFrom>
    <!-- 操作部分  -->
    <div class="operation-box cenBet">
      <div class="operation-left cenLeft">
        <el-button v-if="$store.state.activityId.myPower==1||$store.state.activityId.myPower==2" @click="delTicketByOrderId()" type="danger" icon="el-icon-delete">作废</el-button>
        <div v-if="sumPage" class="operation-tit" style=" margin-left: 16px;"> 共
          <span>{{sumPage}}</span> 笔订单</div>
        <!-- <el-button @click="updateStatusPerformanceById(1)" type="success" icon="el-icon-success">通过</el-button>
           -->
      </div>
      <div class="operation-right">
        <el-button v-if="$store.state.activityId.myPower==1||$store.state.activityId.myPower==2" @click="$openPage('/groupBuying/addGroupBuying')" icon="el-icon-circle-plus">发起国内赠票</el-button>
        <el-button v-if="$store.state.activityId.myPower==1||$store.state.activityId.myPower==2" @click="$openPage('/groupBuying/addNationTicket')" icon="el-icon-circle-plus">发起国际赠票</el-button>
        <el-button v-if="$store.state.activityId.myPower==1||$store.state.activityId.myPower==2" @click="$openPage('/groupBuying/ImportGroupBuying')" icon="el-icon-download">导入国内团购票</el-button>
        <el-button v-if="$store.state.activityId.myPower==1||$store.state.activityId.myPower==2" @click="$openPage('/groupBuying/importicketEng')" icon="el-icon-download">导入国际团购票</el-button>
      </div>
    </div>
    <!-- 表格部分 -->
    <div class="table-box">
      <!-- <el-card :body-style="{ padding: '0px' }" shadow="hover"> -->
      <el-table @selection-change="handleSelectionChange" ref="multipleTable" v-loading="tableLoading" border element-loading-text="拼命加载中" @expand-change="expandChange" :data="tableData">
        <!-- fixed="left" -->
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column align="center" width="200" label="订单信息">
          <template slot-scope="scope">
            <!-- 来源1阿里2大麦3赠票4售卖 -->
            <!-- <div v-if="scope.row.source==3">
              <p>赠票时间:{{$moment(scope.row.giveDate)}}</p>
            </div>
            <div v-if="scope.row.source==4">
              <p>下单时间:{{$moment(scope.row.createDate)}}</p>
              <p>订单号:{{scope.row.orderCode}}</p>
            </div> -->
            <p>
              <span v-if="scope.row.source==3">赠票时间</span>
              <span v-if="scope.row.source==4">下单时间</span>
              <span v-if="scope.row.source==5">转赠时间</span>
              :{{$moment(scope.row.createDate)}}</p>
            <p>订单号:{{scope.row.orderCode}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" width="166" label="负责人信息">
          <template slot-scope="scope">
            <div class="left-text">
              <p>
                姓名：{{scope.row.bName}}
              </p>
              <p>
                手机号：{{scope.row.bTel}}
              </p>
              <p>
                公司：{{scope.row.bCompany}}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门票名称">
          <template slot-scope="scope">
            <div>
              <p>合计：{{scope.row.total}}张</p>
              <p v-if="scope.row.totalPriceoriginalPrice" style="text-decoration:line-through">￥{{scope.row.totalPriceoriginalPrice}}元</p>
              <p v-if="scope.row.totalCurrentPrice">￥{{scope.row.totalCurrentPrice}}元</p>
              <p>
                <span style="margin-right:6px" v-for="(it,ind) of scope.row.ticketTypeMapList " :key="ind">{{it.ticketTypeName}}X{{it.ticketTypeCount}} </span>
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="渠道来源">
          <template slot-scope="scope">
            <div v-if="scope.row.source==3">
              <p>赠票</p>
            </div>
            <div v-if="scope.row.source==4">
              <p>{{scope.row.pricegroupName}}</p>
            </div>
            <div v-if="scope.row.source==5">
              <p>(转赠票)/{{scope.row.pricegroupName}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="详情" width="80" type="expand">
          <template slot-scope="props">
            <table cellspacing="0" class="children-table" border="0">
              <tr class="children-table-head">
                <th>用票人信息</th>
                <th>门票名称</th>
                <th>录脸</th>
                <th>备注</th>
              </tr>
              <tr v-for="(it,ind) of  props.row.children||[] " :key="ind">
                <td>
                  <el-tag v-if="it[item.attribute.filedCode]" style="margin-right:6px;margin-bottom:6px;" v-for="(item,index) of fieldList" :key="index" type="info">{{item.attribute.titName }}: {{it[item.attribute.filedCode]}}</el-tag>
                </td>
                <td>{{it.tTypeName}}</td>
                <td>{{it.haveEnterFace==="true"?'已录脸':"未录脸"}}</td>
                <td style="padding: 16px;">
                  {{it.detail}}
                  <el-button @click="editDetail(it)" icon="el-icon-edit" type="text"></el-button>
                </td>
              </tr>
            </table>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-card> -->
    </div>

    <!-- 门票备注 -->
    <el-dialog title="备注" :visible.sync="editDetailAlert">
      <el-form :model="editDetai">
        <el-form-item label-width="100px" label="备注">
          <el-input type="textarea" :autosize="{ minRows: 2}" v-model="editDetai.detail" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDetailAlert = false">取消</el-button>
        <el-button @click="updateTicketDetailByTicketId()" type="primary">确定</el-button>
      </div>
    </el-dialog>

    <div v-if="sumPage" class="pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="thisPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="sumPage"></el-pagination>
    </div>

    <!-- 作废门票 -->
    <el-dialog title="作废" width="500px" :visible.sync="deltedTicketAlert">
      <div style=" width: 100%; height: auto;padding:10px 0px;color: #393F55;" class="per-box">
        <div>您确定将
          <span style="margin-left:10px" v-for="(item, index) in zuofei" :key="index">{{item.ascription===0? item.uName:item.bName}}</span>
          <span style="font-size: 30px;color: #F56C6C;"> {{zuofei.length}}</span>
          张门票作废吗
        </div>
      </div>
      <el-form :model="deltedTicketDetai">
        <el-form-item label="">
          <el-input type="textarea" :autosize="{ minRows: 2}" v-model="deltedTicketDetai.detail" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deltedTicketAlert = false">取消</el-button>
        <el-button @click="suredelTicketByOrderId()" type="primary">确定作废</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import elementUIFun from "@/components/js/elementUIFun.js";
import servicePub from "@/api/servicePub";
import seachFrom from "@/components/seachFrom";
export default {
  components: {
    seachFrom
  },
  data() {
    return {
      deltedTicketAlert: false, //
      deltedTicketDetai: {
        detail: ""
      },
      editDetailAlert: false, //
      editDetai: {}, //编辑
      tableLoading: false,
      pageSize: 10, //每页多少条
      thisPage: 1, //当前页
      sumPage: 0, //一共有多少条
      tableData: [], //表格数据
      multipleSelection: [], // 选择结果
      zuofei: [] //可以作废的数据
    };
  },
  computed: {
    thisActivityId() {
      return this.$store.state.activityId.thisActivityId;
    },
    fieldList() {
      return this.$store.state.activityId.fieldList;
    }
  },
  watch: {
    thisActivityId(a, b) {
      this.initFun();
    }
  },
  mounted() {
    this.initFun();
  },
  methods: {
    async initFun() {
      this.getTableData();
    },
    // 得到表格数据
    async getTableData() {
      this.tableLoading = true;
      const { data = [] } = await servicePub.queryTicketOrdersByData({
        ...(this.$refs.seachFrom.subSearchFrom || {}),
        activityId: this.$store.state.activityId.thisActivityId,
        // activityId: 23,
        start: (this.thisPage - 1) * this.pageSize,
        size: this.pageSize,
        isDel: 0, // 是否作废1作废 0未作废
        ascription: 1 // * 订单类型 0：个人 1：团体 2：合作伙伴 3：赠票
      });
      this.tableLoading = false;
      this.tableData = data.yunXiOrders || [];
      this.sumPage = data.totalCount || 0;
      // console.log(this.tableData);
      console.log(data);
    },
    // 展开某行时候
    async expandChange(expandedRows) {
      if (expandedRows.children && expandedRows.children.length) {
        return;
      }
      const { data = [] } = await servicePub.queryTicketByOrderId({
        activityId: this.$store.state.activityId.thisActivityId,
        // activityId: 23,
        orderId: expandedRows.orderId
      });
      console.log(data);
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].orderId == expandedRows.orderId) {
          this.$set(this.tableData[i], "children", data || []);
          console.log(this.tableData[i]);
        }
      }
      // this.$forceUpdate();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.thisPage = val;
      this.getTableData();
    },
    // 选项发生改变的时候
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.zuofei = [];
      this.multipleSelection.map((item, i) => {
        if (item.source == 3) {
          this.zuofei.push(item);
        }
      });
    },
    // 作废门票
    async delTicketByOrderId() {
      if (this.zuofei.length == 0) {
        this.$message({
          message: "请至少选择一项可作废的门票！",
          type: "warning"
        });
        return;
      }
      this.deltedTicketAlert = true;
    },
    async suredelTicketByOrderId() {
      if (!this.deltedTicketDetai.detail) {
        this.$message({
          message: "请输入备注内容",
          type: "warning"
        });
        return;
      }
      const confirm = await elementUIFun.$confirm(
        `此操作将进行作废, 是否继续?`
      );
      if (!confirm) {
        return;
      }
      let orderId = [];
      this.zuofei.map(item => {
        orderId.push(item.orderId);
      });
      console.log(orderId);
      let isAllSuccessNum = 0;
      for (let i = 0; i < orderId.length; i++) {
        const { success = false } = await servicePub.delTicketByOrderId({
          activityId: this.$store.state.activityId.thisActivityId,
          orderId: orderId[i],
          delTicketRemark: this.deltedTicketDetai.detail
        });
        if (success) {
          isAllSuccessNum++;
        }
      }
      if (isAllSuccessNum == 0) {
        return;
      } else if (isAllSuccessNum == orderId.length) {
        this.$message({
          message: "作废成功！",
          type: "success"
        });
      } else {
        this.$message({
          message: "部分作废成功！",
          type: "success"
        });
      }
      this.deltedTicketAlert = false;
      this.getTableData();
    },
    // 编辑详情
    editDetail(propsRow) {
      this.editDetai = JSON.parse(JSON.stringify(propsRow));
      this.editDetailAlert = true;
    },
    async updateTicketDetailByTicketId() {
      if (!this.editDetai.detail) {
        this.$message({
          message: "请输入备注内容",
          type: "warning"
        });
        return;
      }
      let subData = {
        activityId: this.$store.state.activityId.thisActivityId,
        ticketId: this.editDetai.ticketId,
        detail: this.editDetai.detail
      };
      const { success = false } = await servicePub.updateTicketDetailByTicketId(
        subData
      );
      if (success) {
        this.editDetailAlert = false;
        this.$message({
          message: "备注成功！",
          type: "success"
        });
        this.getTableData();
      }
    }
  }
};
</script>

